<div class="advanced-option">
  <mat-accordion>
    <mat-expansion-panel *ngIf="isShowAdvancedOption" [class.panel-show]="isShowAdvancedOption">
      <mat-expansion-panel-header style="height: 32px;">
        <mat-panel-title>
          {{ 'Advanced option' | translate }}
        </mat-panel-title>
      </mat-expansion-panel-header>

      <div *ngIf="isShowAdvancedOption" class="options-container">
        <ng-container *ngFor="let item of advancedOptions">
          <span>
            <div *ngIf="item.type === 'checkbox'" class="option-item">
              <mat-checkbox
                (change)="onChange()"
                [(ngModel)]="connectOption[item.field]"
                [name]="item.field"
              >
                {{ item.label | translate }}
              </mat-checkbox>
            </div>
            <ng-container *ngIf="item.type === 'select'">
              <mat-form-field class="option-item">
                <mat-label>{{ item.label | translate }}</mat-label>
                <mat-select (selectionChange)="onChange()" [(ngModel)]="connectOption[item.field]"
                            [name]="item.field"
                >
                  <mat-option *ngFor="let option of item.options" [value]="option.value">
                    {{ option.label | translate }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </ng-container>
            <ng-container *ngIf="item.type === 'radio'">
              <div class="option-item">
                <mat-radio-group (change)="onChange()" [(ngModel)]="connectOption[item.field]"
                                 [name]="item.field">
                  <mat-label style="margin-right: 10px">{{ item.label | translate }}</mat-label>
                  <mat-radio-button *ngFor="let option of item.options" [value]="option.value">
                    {{ option.label | translate }}
                  </mat-radio-button>
                </mat-radio-group>
              </div>
            </ng-container>
          </span>
        </ng-container>
      </div>
    </mat-expansion-panel>
  </mat-accordion>
</div>
